<template>
	<div class='create-project'>
		<Menu />
		<h1>{{typeMap.title}}</h1>
		<main class="steps">
			<div
				class="steps-item"
				v-for="(step,index) in typeMap.steps"
				:key="step.value"
			>
				<div class="index">
					{{index+1}}
				</div>
				<div class="content">
					<h2>{{step.title}}</h2>
					<component
						ref="ChildDom"
						:is="step.component"
						:projectType="projectType"
						@clickCreate="onclickCreate"
					/>
				</div>
			</div>
		</main>
		<el-button
			class="create-btn"
			size="large"
			type="primary"
			@click="onclickCreate"
		>
			确认创建
		</el-button>
	</div>
</template>

<script lang="ts">
export default {
  route: {
    path: 'create/:projectType',
    meta: {
      needLogin: true
    }
  }
}
</script>
<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import BasicInfo from '../components/BasicInfo.vue'
import CreateHint from '../components/CreateHint.vue'
import Menu from '@/components/Menu/index.vue'

const ChildDom = ref(null)

const route = useRoute()
const map = {
  competition: {
    title: '创建竞赛项目',
    steps: [
      { title: '项目基本信息', value: 'baseInfo', component: BasicInfo },
      { title: '附件信息', value: 'files', component: CreateHint },
      { title: '成员信息', value: 'members', component: CreateHint },
    ]
  },
  courseDesign: {
    title: '创建课设项目',
    steps: [
      { title: '项目基本信息', value: 'baseInfo', component: BasicInfo },
      { title: '附件信息', value: 'files', component: CreateHint },
    ]
  },
}
const paramsType = String(route.params.projectType)
const projectType = map[ paramsType ] ? paramsType : 'competition'
const typeMap = map[ projectType ]

/**
 * 点击创建比赛
 */
const onclickCreate = async() => {
  if (!ChildDom.value) {
    return
  }
  const BasicInfo:any = ChildDom.value[ 0 ]
  BasicInfo.createProject(BasicInfo.formRef)
}

</script>

<style lang="scss" scoped>
.create-project {
  padding: 30px 5%;

  h1 {
    color: $primary1;
  }

  .steps {
    margin-top: 20px;

    &-item {
      position: relative;
      display: flex;
      padding-bottom: 20px;

      &:not(:last-of-type)::after {
        position: absolute;
        top: 28px;
        left: 14px;
        width: 2px;
        height: calc(100% - 30px);
        content: '';
        background-color: $primary1;
      }

      .index {
        width: 30px;
        height: 30px;
        font-weight: bold;
        line-height: 26px;
        color: $primary1;
        text-align: center;
        border: 2px solid $primary1;
        border-radius: 50%;
      }

      .content {
        min-height: 100px;
        margin-left: 20px;

        h2 {
          margin-bottom: 10px;
          color: $primary1;
        }
      }
    }
  }

  .create-btn {
    position: fixed;
    top: 10%;
    left: 55%;
  }
}
</style>
